<template>
  <div>
    <atom-notice-bar :color="'#3366FF'" :background="'rgba(51,102,255,0.10)'" closeable
      >更新于{{ updateDate }} 15:30，交易日后15:30后刷新当日数据</atom-notice-bar
    >
    <!-- 所有的涨停 -->
    <div class="allLimit" v-if="faucetObject['current'].length > 0 || isloading">
      <img src="@/assets/img/loading.gif" alt="" class="loading" v-if="isloading" />
      <div class="limit" :class="'limit' + (index + 1)" v-for="(item, index) in faucetObject['current']" :key="index">
        <h4>
          <span>{{ item.ztyy }}</span
          ><span>涨停个股</span><span class="red">{{ item.counts }}</span
          >家
        </h4>
        <ul class="item clearfix">
          <li v-for="(stock, idx) in item.stocks" :key="idx" @click.stop="jump(stock)">
            <p class="base clearfix">
              <span class="name">{{ stock.stockname }}</span
              ><span class="label red" v-if="stock.kjb || stock.lt">{{ calcBoard1(stock) }}</span>
            </p>
            <p class="board">
              <span class="number"
                >{{
                  typeof stock.lbts == 'number' && typeof stock.lbzs == 'number'
                    ? stock.lbts == stock.lbzs
                      ? stock.lbts == 1
                        ? '首板'
                        : stock.lbzs + '连板'
                      : stock.lbts + '天' + stock.lbzs + '板'
                    : '--'
                }}：</span
              ><span class="tip" :class="{ green: !stock.wkb, red: stock.wkb }">{{ calcBoard2(stock) }}</span>
            </p>
          </li>
        </ul>
        <div class="clearfloat"></div>
      </div>
    </div>
    <atom-empty type="search" v-else title="该日期暂无数据" />
  </div>
</template>

<script>
import { reqLimitupGnlt } from '@/apis/index';
import { jumpToFenShi, errorReport, getBoardTag } from '@/scripts/tools.js';

export default {
  name: 'Rdfp',
  props: {
    nowDate: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      faucetObject: {
        // 选中日期数据
        current: [],
        // 全量数据
        detail: {},
      },
      updateDate: '',
      isloading: true,
    };
  },
  methods: {
    getHotSpot() {
      reqLimitupGnlt()
        .then(res => {
          this.faucetObject.detail = res.result;
          const YEARNUM = 4;
          const MONTHNUM = 6;
          const DAYNUM = 8;
          // 获取最新数据更新日期
          const dateStr = Object.keys(res.result)[Object.keys(res.result).length - 1];
          const month = dateStr.substring(YEARNUM, MONTHNUM);
          const day = dateStr.substring(MONTHNUM, DAYNUM);
          const formattedDate = `${month}/${day}`;
          this.updateDate = formattedDate;
          if (res?.result[this.nowDate]) {
            this.faucetObject.current = res?.result[this.nowDate];
          }
        })
        .catch(err => {
          errorReport({
            name: `热点复盘接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        })
        .finally(() => {
          this.isloading = false;
        });
    },
    calcBoard1(item) {
      return getBoardTag(item.kjb, item.lt);
    },
    calcBoard2(item) {
      if (item.wkb) {
        if (item.yzb) {
          return '一字板';
        } else {
          return '未开板';
        }
      } else {
        return '开板';
      }
    },
    jump(stock) {
      jumpToFenShi(stock.stockcode, stock.marketcode);
    },
  },
  activated() {
    this.getHotSpot();
  },
  watch: {
    nowDate() {
      this.faucetObject.current = this.faucetObject.detail[this.nowDate] || [];
    },
  },
};
</script>

<style lang="less" scoped>
.loading {
  width: 56px;
  height: 56px;
  display: block;
  margin: auto;
}
.limit {
  background-color: #ffffff;
  h4 {
    padding: 24px 32px 0;
    height: 34px;
    font-size: 28px;
    color: rgba(0, 0, 0, 0.84);
    line-height: 34px;
    font-weight: 400;
    .red {
      color: #ff2436;
      font-weight: 600;
    }
  }
  .item {
    display: flex;
    flex-wrap: wrap;
    padding: 0 32px;
    li {
      float: left;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 247px;
      border-bottom: solid 1px #f5f5f5;
      .base {
        white-space: nowrap;
        margin-top: 24px;
        margin-bottom: 12px;
        .name {
          font-size: 32px;
          color: rgba(0, 0, 0, 0.84);
          line-height: 40px;
          font-weight: 400;
          margin-right: 12px;
        }
        .label {
          width: 52px;
          height: 28px;
          border-radius: 4px;
          font-size: 20px;
          line-height: 28px;
          font-weight: 400;
          background: rgba(255, 36, 54, 0.1);
          color: rgb(255, 36, 54);
          display: inline-block;
          vertical-align: top;
          text-align: center;
        }
      }
      .board {
        font-size: 24px;
        line-height: 32px;
        font-weight: 400;
        margin: 12px 0 24px;
        .number {
          color: rgba(0, 0, 0, 0.4);
        }
        .green {
          color: rgb(7, 171, 75);
        }
        .red {
          color: rgb(255, 36, 54);
        }
      }
    }
    li:nth-of-type(3n) {
      width: 192px;
    }
  }
  .clearfloat {
    clear: both;
    height: 17px;
    background: #f5f5f5;
    width: 100%;
  }
}
</style>
